import React from 'react';
import { Badge } from '../../components/ui/badge';
import type { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof Badge> = {
  title: 'UI/Badge',
  component: Badge,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select', options: ['default', 'secondary', 'destructive', 'outline'] },
    },
  },
};

export default meta;
type Story = StoryObj<typeof Badge>;

export const Default: Story = {
  args: {
    children: '默认',
    variant: 'default',
  },
};

export const Secondary: Story = {
  args: {
    children: '次要',
    variant: 'secondary',
  },
};

export const Destructive: Story = {
  args: {
    children: '危险',
    variant: 'destructive',
  },
};

export const Outline: Story = {
  args: {
    children: '轮廓',
    variant: 'outline',
  },
};

export const WithIcon: Story = {
  render: () => (
    <div className="flex gap-2">
      <Badge variant="default" className="gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2v20M2 12h20" />
        </svg>
        新增
      </Badge>
      <Badge variant="secondary" className="gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />
          <line x1="12" y1="8" x2="12" y2="16" />
          <line x1="8" y1="12" x2="16" y2="12" />
        </svg>
        信息
      </Badge>
    </div>
  ),
};
